<template>
	<view class="">
		<view class="content">
			<view class="box d-jc-c logo">
				<image src="../../static/login/logo.png" mode=""></image>
			</view>
			<view class="" v-show="!isPhoneLogin">
				<view class="box line-box d-ai-c">
					账号 <input v-model="parameter.username" class="ml-3" type="text" value=""
						placeholder-style="fontSize:30rpx" placeholder="请输入您的登录账号" />
				</view>
				<view class="box line-box d-ai-c mt-2">
					密码 <input v-model="parameter.password" class="ml-3" :password="showPassword" type="text" value=""
						placeholder-style="fontSize:30rpx;color:#999" placeholder="请输入登录密码" />
					<text class="iconfont  ml-5" :class="showPassword?'icon-yanjing':'icon-yanjingbiyan'"
						@tap="catPassword"></text>

				</view>
			</view>
			<view class="" v-show="isPhoneLogin">
				<view class="box line-box d-ai-c">
					手机号 <input v-model="parameter.phone" class="ml-3" type="text" value=""
						placeholder-style="fontSize:30rpx" placeholder="请输入您的手机号" />
				</view>
				<view class="box line-box d-ai-c mt-2 code">
					验证码 <input v-model="parameter.verification" class="ml-3" type="text" value=""
						placeholder-style="fontSize:30rpx;color:#999" placeholder="请输入验证码" />
					<text class="" @tap="getCode">{{timeFlag?timeCount:'获取验证码'}}</text>
				</view>
			</view>
			<view class="btn box d-ai-c d-jc-c" @tap="subLogin()">
				<text>登录</text>
			</view>
			<view class="box d-jc-sb change">
				<text @tap="forgetPW()">忘记密码？</text>
				<text @tap="changeLoginType">{{isPhoneLogin?'账号密码登录':'手机验证码登录'}}</text>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				showPassword: true,
				isPhoneLogin: false,
				timeFlag: false,
				timeCount: '',
				totalTime: 59,
				parameter: {
					username: '',
					password: '',
					type: '1', //1 账号登陆 2 验证码登陆
					verification: '',
					phone: '',
					verificationType: '4'
				},
			}
		},
		computed: mapState(['shopInfo', 'loginState']),
		methods: {
			...mapMutations(['login']),
			subLogin() {
				this.$api.login(this.parameter).then((res) => {
					if (res.data.success) {
						this.login(res.data.dataMap)
						uni.navigateBack(1)
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						});
					}


				})
			},
			changeLoginType() {
				this.isPhoneLogin = !this.isPhoneLogin
				if(this.isPhoneLogin){
					this.parameter.type=2
				}else{
					this.parameter.type=1
				}
				console.log(this.parameter.type)
			},
			getCode() {
				this.$api.getVerificationCode(this.parameter).then((res) => {
					if (res.data.code == 200) {
						this.timeFlag = true
						this.timeCount = this.totalTime + 's'
						let clock = setInterval(() => {
							this.totalTime--
							this.timeCount = this.totalTime + 's'
							if (this.totalTime < 0) { //当倒计时小于0时清除定时器
								clearInterval(clock)
								this.timeFlag = false
								this.totalTime = 59
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
				})
			
			},
			forgetPW(){
				uni.navigateTo({
					url: 'forgetPSW',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// getCode() {
			// 	this.timeFlag = true
			// 	this.timeCount = this.totalTime + 's'
			// 	let clock = setInterval(() => {
			// 		this.totalTime--
			// 		this.timeCount = this.totalTime + 's'
			// 		if (this.totalTime < 0) { //当倒计时小于0时清除定时器
			// 			clearInterval(clock)
			// 			this.timeFlag = false
			// 			this.totalTime = 59
			// 		}
			// 	}, 1000)
			// },
			catPassword() {
				this.showPassword = !this.showPassword
			}

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 50rpx 70rpx;

		.change {
			color: #FF5551;
		}

		.btn {
			width: 600rpx;
			height: 100rpx;
			background-color: #FF5551;
			border-radius: 15rpx;
			margin: 50rpx auto;
			color: #fff;
			font-size: 32rpx;
		}

		.line-box {
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 0px 0rpx #EEEEEE;
			font-size: 32rpx;
			color: #333333;

			input {
				width: 400rpx;
			}
		}

		.code {
			input {
				width: 260rpx;
			}

			text {
				color: #FF5551;
				width: 220rpx;
				text-align: end;
			}


		}

		.logo {
			image {
				width: 256rpx;
				height: 230rpx;

			}
		}
	}
</style>
